﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Canvas animation example</title>
    <script type="text/javascript"><!--
        window.addEventListener('load', function () {
            // Get the canvas element.
            var canvas = document.getElementById('myCanvas'),
      w = 4,
      h = 4,
      zoompx = 6,
      step = 'zoomin';

            if (!canvas || !canvas.getContext) {
                return;
            }

            // Get the canvas 2d context.
            var ctx = canvas.getContext('2d');
            if (!ctx) {
                return;
            }

            var K = 4 * ((Math.SQRT2 - 1) / 3);

            setInterval(function () {
                if (step == 'zoomin') {
                    w += zoompx;
                    h += zoompx;
                } else if (step == 'zoomout') {
                    w -= zoompx;
                    h -= zoompx;
                }

                if (w > canvas.width) {
                    w = canvas.width;
                    step = 'zoomout';
                } else if (w < 4) {
                    w = 4;
                    step = 'zoomin';
                }

                if (h > canvas.height) {
                    h = canvas.height;
                    step = 'zoomout';
                } else if (h < 4) {
                    h = 4;
                    step = 'zoomin';
                }

                // Create the radial gradient: x0, y0, r0, x1, y1, r1.
                // That's the start circle (x0,y0) coordinates and r0 radius,
                // followed by the end circle (x1,y1) coordinates and r1 radius.
                var gradient = ctx.createRadialGradient(
      Math.round(w / 2), Math.round(h / 2), 0, Math.round(w / 2), Math.round(h / 2),
      Math.round(Math.min(w, h) / 2));

                gradient.addColorStop(0, "#ff0");
                gradient.addColorStop(1, "#0f0");

                // Use the gradient for the fillStyle.
                ctx.fillStyle = gradient;

                // Ellipse radius and center.
                var cx = w / 2,
      cy = h / 2,

                // Ellipse radius*Kappa, for the Bézier curve control points
      rx = cx * K,
      ry = cy * K;

                ctx.setTransform(1, 0, 0, 1, 0, 0);

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                ctx.setTransform(1, 0, 0, 1, Math.round((canvas.width - w) / 2),
    Math.round((canvas.height - h) / 2));

                ctx.beginPath();

                // startX, startY
                ctx.moveTo(cx, 0);

                // Control points: cp1x, cp1y, cp2x, cp2y, destx, desty
                // go clockwise: top-middle, right-middle, bottom-middle, then left-middle
                ctx.bezierCurveTo(cx + rx, 0, w, cy - ry, w, cy);
                ctx.bezierCurveTo(w, cy + ry, cx + rx, h, cx, h);
//                ctx.bezierCurveTo(cx - rx, h, 0, cy + ry, 0, cy);
//                ctx.bezierCurveTo(0, cy - ry, cx - rx, 0, cx, 0);

                ctx.fill();
                ctx.stroke();
                ctx.closePath();
            }, 20);
        }, false);


    // --></script>
  </head>
  <body>
    <p><canvas id="myCanvas" width="320" height="320">Your browser does not have 
    support for Canvas.</p>
  </body>
</html>